import { getCityList } from "../../api/city";

Page({
  cities: [], // 城市列表源数据

  data: {
    list: [], // 用于页面展示用的城市数据
    indexList: [], // 拼音检索
    currentIndex: "", // 当前拼音

    searchList: [], // 搜素结果
    focus: false, // 输入框是否获取焦点
  },

  refresh() {
    getCityList().then((resp) => {
      this.cities = resp.cities;

      // 最终用于页面展示的数据
      // [
      //   {
      //     groupName: 'A',
      //     groupList: [
      //       {}
      //     ]
      //   }
      // ]
      let result = [];
      // 针对源数据做按照拼音首字母分组操作
      this.cities.forEach((item) => {
        // 1. 获取当前的拼音首字母
        const groupName = item.pinyin[0].toUpperCase();
        // 2. 获取 groupName 在 result 数组中的下标
        const index = result.findIndex(
          (group) => group.groupName === groupName
        );
        // 3. 判断是否存在
        if (index !== -1) {
          // 存在，则直接添加当前城市到 result 对应下标的分组中
          result[index].groupList.push(item);
        } else {
          // 不存在，则构造数据写入
          result.push({
            groupName,
            groupList: [item],
          });
        }
      });
      // 做一个排序
      result = result.sort((a, b) => (a.groupName < b.groupName ? -1 : 1));
      // 基于 result 计算出 indexList
      const indexList = result.map((item) => item.groupName);

      this.setData({
        list: result,
        indexList,
      });
    });
  },

  // 右侧拼音点击
  onTap(event) {
    const { index } = event.currentTarget.dataset;
    this.setData({ currentIndex: index });
  },

  // 输入框输入事件
  onInput(event) {
    const { value } = event.detail;
    // 使用 value 和 cities 做过滤
    const result = this.cities.filter(
      (item) => item.pinyin.includes(value) || item.name.includes(value)
    );
    this.setData({ searchList: value ? result : [] });
  },

  onFocus() {
    this.setData({ focus: true });
  },

  onBlur() {
    this.setData({ focus: false });
  },

  onLoad() {
    this.refresh();
  },
});
